<template>
  <div class="init-container">
    <Table
      ref="table"
      highlight-row
      disabled-hover
      :data="G_data"
      :columns="columns"
      @on-selection-change="onSelect"
      @on-row-click="onRowClick"
    >
    </Table>
  </div>
</template>

<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue } from '@/services';

@T_srv.comp
export default class cTable extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Array,
    default: () => []
  })
  data: Array<any>;

  @T_srv.prop({
    required: false,
    type: Array,
    default: []
  })
  columns: Array<any>;

  @T_srv.ref('table') refTable: any;

  /* 组件名 */
  private G_compName: string = 'cTable';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;
  /* 指挥部 */

  private G_data: Array<any> = [];

  @T_srv.watch('data', { deep: true })
  onDataChange(val) {
    this.G_data = val;
  }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.G_data = this.data;
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    document.querySelector('.ivu-table-body').classList.add('y-scroll');
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null
  }

  onSelect(currentRow, oldcurrentRow) {
    this.$emit('on-selection-change', { currentRow, oldcurrentRow });
  }

  onRowClick(row, index) {
    this.$emit('on-row-click', row, index);
  }

  loadData(d: Array<any>) {
    this.G_data = d;
  }

  addData(d: any) {
    this.G_data.push(d);
  }
}
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-body {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
